<template>
  <div>
    <title-panel />
    <van-form
      input-align="right"
      error-message-align="right"
      :show-error-message="false"
      show-error
      scroll-to-error
      validate-first
      @failed="onFailed"
      @submit="onSubmit"
    >
      <van-field
        v-model="obj.barnName"
        required
        readonly
        name="barnName"
        label="羊舍名称"
        placeholder="默认带出当前羊舍名称，不可修改"
      />
      <van-field
        v-model="obj.sheepType"
        required
        readonly
        name="sheepType"
        label="羊舍类型"
        placeholder="默认带出当前羊舍类型，不可修改"
      />
      <van-field
        required
        readonly
        is-link
        input-align="right"
        :value="obj.theStandard"
        name="theStandard"
        label="使用标准"
        placeholder="带出默认的已绑定标准，可修改"
        :rules="[{ required: true, message: '请选择使用标准' }]"
        @click="natureShows = true"
      />
       <van-field
        required
        readonly
        is-link
        input-align="right"
        :value="obj.bindingPhase"
        name="bindingPhase"
        label="绑定阶段"
        placeholder="点击选择"
        :rules="[{ required: true, message: '请选择绑定阶段' }]"
        @click="natureShows1 = true"
      />

      <van-popup v-model="natureShows" position="bottom">
        <van-picker
          show-toolbar
          :columns="natureNameList"
          value-key="name"
          @confirm="onConfirmType"
          @cancel="natureShows = false"
        />

      </van-popup>
      <van-popup v-model="natureShows1" position="bottom">

        <van-picker
          show-toolbar
          :columns="natureNameList1"
          value-key="name"
          @confirm="onConfirmType1"
          @cancel="natureShows1 = false"
        />

      </van-popup>
      <div class="spacing" />
      <div class="add-btn">
        <van-button
          block
          type="info"
          color="#37B5B5"
          style="width: 85%; margin: auto; margin-top: 50px"
          native-type="submit"
          size="large"
          :loading="loading"
          loading-text="提交中..."
          >保存</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import {
  Form,
  Field,
  Calendar,
  RadioGroup,
  Radio,
  Dialog,
  Toast,
  DatetimePicker,
  Picker,
  Button,
  Icon,
  Popup,
  Cell
} from 'vant'
import UploadImg from '@/components/uploadImg'
import TitlePanel from '@/components/titlePanel'
import dayjs from 'dayjs'
import { getValue, setValue, clearValue } from '@/utils/auth'
import { getHandle, postHandle } from '../../api'
export default {
  components: {
    UploadImg,
    TitlePanel,
    [Form.name]: Form,
    [Field.name]: Field,
    [Calendar.name]: Calendar,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [Dialog.Component.name]: Dialog.Component
  },
  data() {
    return {
        natureNameList1:[],
      natureShows1: false,
      currentDate: new Date(),
      showPicker1: false,
      loading: false,
      isDisabled: false,
      natureShows: false,
      natureNameList: [1, 2, 3, 4],
      natureShow: false,
      natureNameLists: [],
      fertiliList: [],
      houseInfoId: getValue('fzmHourseId') || '',
      // useStandard: { name: '标准12', id: '9cce3870-fb3e-4f77-b316-bc81dfbfce93' },
      siteList: [],
      obj: {
        barnName: '',
        sheepType: '',
        theStandard: '',
        bindingPhase: ''
      },
      contentObj: {}
    }
  },
  created() {},
  mounted() {
    let houseTypeCode =  getValue('houseTypeCode') || '';
    ;(this.obj.barnName = getValue('fzmHourseName') || ''), (this.obj.sheepType = houseTypeCode == 'HOUSE_TYPE_LAMB' ? '羔羊舍' : houseTypeCode == 'EXPERT_TYPE_EWE' ? '泌乳羊舍' : houseTypeCode == 'EXPERT_TYPE_TUP_RAM' ? '种公羊舍' : houseTypeCode == 'EXPERT_TYPE_ISOLATION' ? '隔离舍' : '')
    this.initialize()
  },
  methods: {
      onConfirmType1(value){
      let index = this.siteList.indexOf(value);
      if (index == -1) {
        this.siteList.push(value);
      } else {
        this.siteList.splice(index, 1);
      }
      this.obj.bindingPhase = this.siteList
        .map((item) => item.name)
        .join(",");
      this.natureShows1 = false;
      },
    onConfirmType(value) {
      this.obj.theStandard = value.name
      this.theStandardID = value.id
      this.bindStageData(value.id)
      this.obj.bindingPhase = []
      this.siteList = []
      this.natureShows = false
    },
    //获取默认数据
    initialize() {
      getHandle('/agri/api/zzbzh/standardBand/queryListPage').then(res => {
        if (res.status === 0) {
          let bindingList = []
          res.data.rows.map(item => {
            if(item.bandFlag == 1){
              bindingList.push(item)
            }
          })
         let bindIndex =  bindingList.map(item => item.defaultFlag ).indexOf(1)
         this.natureNameList = bindingList
         if(bindingList.length>0){
           if(bindIndex == -1){
              this.obj.theStandard = bindingList[0].name
              this.theStandardID = bindingList[0].id
              this.bindStageData(bindingList[0].id)
          }else{
              this.obj.theStandard = bindingList[bindIndex].name
              this.theStandardID = bindingList[bindIndex].id
              this.bindStageData(bindingList[bindIndex].id)
          }
         }

        }
      })
    },
    bindStageData(id) {
      getHandle(`/agri/api/zzbzh/standard/queryDetail/${id}`).then(res => {
        // this.list = res.data
        if(res.status == 0){
            this.natureNameList1 = res.data.stagelList
        }

      })
    },
    //开始时间
    onConfirmStartDate(value) {
      this.obj.buyDate = dayjs(value).format('YYYY-MM-DD')
      this.showPicker1 = false
    },
    onFailed(errorInfo) {
      Toast(errorInfo.errors[0].message)
    },
    onSubmit(value) {
      this.loading = true
      let params = {
        houseInfoId: this.houseInfoId,
        productStandardId: this.theStandardID,
        stageIds: this.siteList.map(item => item.id),
        subjectInfoId: getValue('subjectInfoId'),
        tenantCode: getValue('tenantCode'),
        loginUserId: getValue('loginUserId')
      }
      postHandle('/agri/api/yzbzh/standardUse/save', params).then(res => {
        if (res.status == '0') {
          this.$toast(res.msg)
          this.$bridge.call('base.closePage')
        } else {
          this.$toast(res.msg)
        }
        setTimeout(() => {
          this.loading = false
        }, 1000)
      })
      // let imgInfos = this.obj.imgInfos.map((item) => item.url).join(",");
    }
  }
}
</script>
<style lang="scss" scoped>
.tip {
  padding-top: 15px;
  color: #999999;
  font-size: 12px;
  line-height: 16px;
  margin: auto;
}
.btn {
  width: 80%;
  margin: 50px auto 0 auto;
}
.btn > div {
  height: 50px;
  background: #2871fe;
  border-radius: 4px;
  text-align: center;
  line-height: 50px;
  color: #ffffff;
  font-size: 17px;
}
.btn .cancel {
  margin-top: 20px;
  background: rgba(40, 113, 254, 0.1);
  border: 1px solid #2871fe;
  color: #2871fe;
}
::v-deep .van-field__label {
  width: 6em;
}
.bthStyle {
  width: 56px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #2871fe;
}
.active {
  background-color: #fff;
  color: #2871fe;
}
.add-btn {
  padding-bottom: 20px;
}
.addbtn {
  width: 50px;
  height: 24px;
  font-size: 13px;
  padding: 0;
  margin-right: 13px;
  z-index: 10;
  float: right;
  margin-top: -38px;
}
.btnfrom {
  padding: 0;
}
.fromInput {
  width: 86%;
}
</style>
